body{margin:0;}
.main-container{width:100%;height:100%;margin:0;background-color: bisque;position:relative;}
/*游戏区*/
.game-container{width:800px;height:800px;border:5px solid rgb(9 175 103);position: relative;left: 0;right: 0;margin: auto;}

.score-tab{width:100%;height:80px;text-align: center;}
.score-show-tab{position: absolute;margin: auto;left: 0;right: 0;top: 16px;font-family: fantasy;font-size: 36px;color: brown;}
.score-show-tab .score-show{color:red;}
/*icon*/
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
/*蛇头*/
.snake-head{width:20px;height:15px;border-radius: 45%;background-color: blueviolet;color:white;line-height:12px;text-align: center;position: absolute;margin:0 auto;padding:0;}
.snake-head .snake-head-eyel{width:3px;height:3px;border-radius: 45%;background-color: white;position:absolute;left: 13px;top:9px;margin:0, auto;}
.snake-head .snake-head-eyer{width:3px;height:3px;border-radius: 45%;background-color: white;position:absolute;left: 13px;top:4px;margin:0, auto;}
/*蛇身*/
.snake-body{width:20px;height:15px;border-radius: 45%;background-color: blueviolet;color:white;line-height:12px;text-align: center;position: absolute;margin:0 auto;padding:0;}
/*蛇尾*/
.snake-tail{width:20px;height:10px;border-radius: 45%;background-color: blueviolet;color:white;line-height:8px;text-align: center;position: absolute;margin:0 auto;padding:0;}
/*游戏区-表格
.game-zone-table{width: 100%;height: 100%;background-color: #f5fdec;position:relative;}
.game-zone-table td{width:20px;height:20px;border:none;font-size:18px;color:#fff;text-align:center;position: relative;overflow:visible;}
*/
/*按钮区域*/
.button-zone{position: absolute;top: 220px;right: -150px;}
.button-zone .btn-begin{width: 120px;height: 65px;font-size: 28px;color:#f30;}
/*食物*/
.food-position{position: absolute;}
/*吃掉动画*/
.eatfood{
    animation-name:eatting;
    animation-duration: 300ms;
    animation-delay: 0;
    animation-iteration-count: 1;
    -webkit-animation-name:eatting;
    -webkit-animation-duration: 300ms;
    -webkit-animation-delay: 0;
    -webkit-animation-iteration-count: 1;
}
 @keyframes eatting {from {font-size:18;}to {font-size:38;}}
/*Safari 和 Chrome:*/
@-webkit-keyframes eatting{​from {font-size:18;}​to {font-size:38;}}
/*旋转*/
.xuanzhuan{
    animation-name:turnLeft_2_L;
    animation-duration: 300ms;
    animation-delay: 0;
    animation-iteration-count: 1;
    -webkit-animation-name:turnLeft_2_L;
    -webkit-animation-duration: 300ms;
    -webkit-animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    }
/*向上运动向左转*/
@-webkit-keyframes turnLeft_1_L{​from {-webkit-transform: rotate(-90deg);}​to {-webkit-transform: rotate(-180deg);}}
@keyframes turnLeft_1_L{from {-webkit-transform: rotate(-90deg);}​to {-webkit-transform: rotate(-180deg);}}
/*向上运动向右转*/
@-webkit-keyframes turnLeft_1_R{​from {-webkit-transform: rotate(-90deg);}​to {-webkit-transform: rotate(0deg);}}
@keyframes turnLeft_1_R{​from {-webkit-transform: rotate(-90deg);}​to {-webkit-transform: rotate(0deg);}}
/*向右运动向左转*/
@-webkit-keyframes turnLeft_2_L{​from {-webkit-transform: rotate(0deg);}​to {-webkit-transform: rotate(-90deg);}}
@keyframes turnLeft_2_L{​from {-webkit-transform: rotate(0deg);}​to {-webkit-transform: rotate(-90deg);}}
/*向右运动向右转*/
@-webkit-keyframes turnLeft_2_R{​from {-webkit-transform: rotate(0deg);}​to {-webkit-transform: rotate(90deg);}}
@keyframes turnLeft_2_R{​from {-webkit-transform: rotate(0deg);}​to {-webkit-transform: rotate(90deg);}}
